<!DOCTYPE html>
<html lang="en" dir="auto">

<head><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="index, follow">
<title>Features | flipped</title>
<meta name="keywords" content="PaperMod" />
<meta name="description" content="Learn About All Features in PaperMod">
<meta name="author" content="Aditya Telange">
<link rel="canonical" href="http://zouheng22.gitee.io/flippedzh/posts/papermod/papermod-features/" />
<link crossorigin="anonymous" href="/flippedzh/assets/css/stylesheet.min.2d6dbfc6e0f8a1db1c9d082a76dc11d094328cf63f247bbc2421dfaa7f2bb170.css" integrity="sha256-LW2/xuD4odscnQgqdtwR0JQyjPY/JHu8JCHfqn8rsXA=" rel="preload stylesheet" as="style">
<script defer crossorigin="anonymous" src="/flippedzh/assets/js/highlight.min.7680afc38aa6b15ddf158a4f3780b7b1f7dde7e91d26f073e6229bb7a0793c92.js" integrity="sha256-doCvw4qmsV3fFYpPN4C3sffd5&#43;kdJvBz5iKbt6B5PJI="
    onload="hljs.initHighlightingOnLoad();"></script>
<link rel="icon" href="http://zouheng22.gitee.io/flippedzh/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="http://zouheng22.gitee.io/flippedzh/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://zouheng22.gitee.io/flippedzh/favicon-32x32.png">
<link rel="apple-touch-icon" href="http://zouheng22.gitee.io/flippedzh/apple-touch-icon.png">
<link rel="mask-icon" href="http://zouheng22.gitee.io/flippedzh/safari-pinned-tab.svg">
<meta name="theme-color" content="#2e2e33">
<meta name="msapplication-TileColor" content="#2e2e33">
<meta name="generator" content="Hugo 0.83.1" />
<link rel="alternate" hreflang="en" href="http://zouheng22.gitee.io/flippedzh/posts/papermod/papermod-features/" />
<meta property="og:title" content="Features" />
<meta property="og:description" content="Learn About All Features in PaperMod" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://zouheng22.gitee.io/flippedzh/posts/papermod/papermod-features/" /><meta property="og:image" content="http://zouheng22.gitee.io/flippedzh/papermod-cover.png"/><meta property="article:section" content="posts" />
<meta property="article:published_time" content="2021-01-20T00:00:00&#43;00:00" />
<meta property="article:modified_time" content="2021-01-20T00:00:00&#43;00:00" />

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="http://zouheng22.gitee.io/flippedzh/papermod-cover.png"/>

<meta name="twitter:title" content="Features"/>
<meta name="twitter:description" content="Learn About All Features in PaperMod"/>


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [, 
    {
      "@type": "ListItem",
      "position":  2 ,
      "name": "Posts",
      "item": "http://zouheng22.gitee.io/flippedzh/posts/"
    }, 
    {
      "@type": "ListItem",
      "position":  3 ,
      "name": "PaperMod",
      "item": "http://zouheng22.gitee.io/flippedzh/posts/papermod/"
    }, 
    {
      "@type": "ListItem",
      "position":  4 ,
      "name": "Features",
      "item": "http://zouheng22.gitee.io/flippedzh/posts/papermod/papermod-features/"
    }
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Features",
  "name": "Features",
  "description": "Learn About All Features in PaperMod",
  "keywords": [
    "PaperMod"
  ],
  "articleBody": "Intro   We’ll be using yml/yaml format for all examples down below, I recommend using yml over toml as it is easier to read.\n  You can find any YML to TOML converters if necessary.\n   Assets (js/css) The following is enabled by default\n minification - makes the assets size smallest as possible. bundling - bundles all the styles in one single asset fingerprint/integrity check.   Default Theme light/dark/auto params: # defaultTheme: light # defaultTheme: dark defaultTheme: auto # to switch between dark or light according to browser theme   Theme Switch Toggle (enabled by default) Shows icon besides title of page to change theme\nTo disable it :\ndisableThemeToggle: true You can refer following table for better understanding…\n   defaultTheme disableThemeToggle checks local storage? checks system theme? Info     auto true No Yes only system theme    false Yes (if not-2) Yes (2) switch present   dark true No No force dark only    false Yes No switch present   light true No No force light only    false Yes No switch present     Archives Layout Create a page with archive.md in content directory with following content\n. ├── config.yml ├── content/ │ ├── archives.md and add the following to it\n--- title: \"Archive\" layout: \"archives\" url: \"/archives/\" summary: archives --- Note: Archives Layout does not support Multilingual Month Translations.\nex: archives.md\n Regular Mode (default-mode)  Home-Info Mode Use 1st entry as some Information\nadd following to config file\nparams: homeInfoParams: Title: Hi there wave Content: Can be Info, links, about... socialIcons: # optional - name: \"\" url: \"\" - name: \"\" url: \"\" ex. config.yml#L106\n Profile Mode Shows Index/Home page as Full Page with Social Links and Image\nadd following to config file\nparams: profileMode: enabled: true title: \"\" # optional default will be site title subtitle: \"This is subtitle\" imageUrl: \"\" # optional imageTitle: \"\" # optional imageWidth: 120 # custom size imageHeight: 120 # custom size buttons: - name: Archive url: \"/archive\" - name: Github url: \"https://github.com/\" socialIcons: # optional - name: \"\" url: \"\" - name: \"\" url: \"\"  Search Page PaperMod uses Fuse.js Basic for seach functionality\nAdd the following to site config, config.yml\noutputs: home: - HTML - RSS - JSON # is necessary Create a page with search.md in content directory with following content\n--- title: \"Search\" # in any language you want layout: \"search\" # is necessary # url: \"/archive\" # description: \"Description for Search\" summary: \"search\" --- To hide a particular page from being searched, add it in post’s fron’t matter\n--- searchHidden: true ex: search.md\n Search Page also has Key bindings:\n Arrow keys to move up/down the list Enter key (return) or Right Arrow key to Go to highlighted page Escape key to clear searchbox and results   For Multilingual use search..md ex. search.es.md.\nNote: Search will work only on current language, user is currently on !\nCustomizing Fusejs Options\nRefer https://fusejs.io/api/options.html for Options, Add those as shown below.\nparams: fuseOpts: isCaseSensitive: false shouldSort: true location: 0 distance: 1000 threshold: 0.4 minMatchCharLength: 0 keys: [\"title\", \"permalink\", \"summary\", \"content\"]  Draft Page indication adds [draft] mark to indicate draft pages.\n Post Cover Image In post’s page-variables add :\ncover: image: \"\" # can also paste direct link from external site # ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png alt: \"\" caption: \"\" relative: false # To use relative path for cover image, used in hugo Page-bundles When you include images in the Page Bundle, multiple sizes of the image will automatically be provided using the HTML5 srcset field.\nTo reduce generation time and size of the site, you can disable this feature using\nparams: cover: responsiveImages: false To enable hyperlinks to the full image size on post pages, use\nparams: cover: linkFullImages: true  Share Buttons on post Displays Share Buttons at Bottom of each post\nto show share buttons add\nparams: ShowShareButtons: true  Show post reading time Displays Reading Time (the estimated time, in minutes, it takes to read the content.)\nTo show reading time add\nParams: ShowReadingTime: true  Show Table of Contents (Toc) on blog post Displays ToC on blog-pages\nTo show ToC add following to page-variables\nShowToc: true To keep Toc Open by default on a post add following to page-variables:\nTocOpen: true  BreadCrumb Navigation Adds BreadCrumb Navigation above Post’s Title to show subsections and Navigation to Home\nparams: ShowBreadCrumbs: true Can be diabled for particular page’s front-matter\n--- ShowBreadCrumbs: false ---  Edit Link for Posts Add a button to suggest changes by using the file path of the post to link to a edit destination.\nFor site config use:\nParams: editPost: URL: \"https://github.com//content\" Text: \"Suggest Changes\" # edit text appendFilePath: true # to append file path to Edit link Can be modified for individual pages\n--- editPost: URL: \"https://github.com//content\" Text: \"Suggest Changes\" # edit text appendFilePath: true # to append file path to Edit link --- The example above would yield the following link for the post file posts/post-name.md: https://github.com//content/posts/post-name.md\n   Parameter Required Default Value     editPost.URL true -   editPost.appendFilePath false false   editPost.Text false “Edit”    Since the link generated is a regular HTML anchor tag , you can also use other URL schemas like mailto://, e.g. URL: \"mailto://mail@example.com?subject=Suggesting changes for \"\n Other Posts suggestion below a post Adds a Previous / Next post suggestion under a single post\nparams: ShowPostNavLinks: true  Multiple Authors To Use multiple authors for a post, in post-variables:\n--- author: [\"Me\", \"You\"] --- To use Multiple Authors Site-wide, in config.yml:\nparams: author: [\"Me\", \"You\"]  Comments to add comments, create a html file\nlayouts/partials/comments.html\nand paste code provided by your comments provider\nalso in config add this\nparams: comments: true read more about this hugo-comments\n AccessKeys c - ToC Open/Close g - Go To Top h - Home (according to current lang) t - Theme toggle / - Jumps to search page if in menu What’s AccessKeys ?\n Enhanced SEO Enabled only when env: production\n Rich Results/Snippets Support  Twitter Cards Support  The Twitter Cards metadata, except twitter:image should not require additional configuration, since it is generated from metadata that you should already have (for instance the page title and description). The twitter:image uses the Post Cover Image, if present. In the absence of a cover images, the first image from the images frontmatter (a list) is used. images: - image_01.png - image_02.png  Finally, if neither of those are provided, twitter:image comes from the first Page Bundle image with feature in the name, with a fallback to the first image with cover or thumbnail in the name.  OpenGraph support  The OpenGraph metadata, except og:image should not require additional configuration, since it is generated from metadata that you should already have (for instance the page title and description). The og:image uses the Post Cover Image, if present. In the absence of a cover images, the first image from the images frontmatter (a list) is used. images: - image_01.png - image_02.png  Finally, if neither of those are provided, og:image comes from the first Page Bundle image with feature in the name, with a fallback to the first image with cover or thumbnail in the name. For pages, you can also add audio (using frontmatter audio: filename.ext) and/or videos. videos: - filename01.mov - filename02.avi    Multilingual Support  Misc Scroll-Bar themed (by default) Smooth Scroll between in-page links (by default) Scroll-to-Top Button (by default) Displays a Scroll-to-Top button in right-bottom corner Google Analytics integration Syntax highlighting RSS feeds ",
  "wordCount" : "1228",
  "inLanguage": "en",
  "datePublished": "2021-01-20T00:00:00Z",
  "dateModified": "2021-01-20T00:00:00Z",
  "author":{
    "@type": "Person",
    "name": "Aditya Telange"
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "http://zouheng22.gitee.io/flippedzh/posts/papermod/papermod-features/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "flipped",
    "logo": {
      "@type": "ImageObject",
      "url": "http://zouheng22.gitee.io/flippedzh/favicon.ico"
    }
  }
}
</script>
</head>

<body class="" id="top">
<script>
    if (localStorage.getItem("pref-theme") === "dark") {
        document.body.classList.add('dark');
    } else if (localStorage.getItem("pref-theme") === "light") {
        document.body.classList.remove('dark')
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
    }

</script>
<noscript>
    <style type="text/css">
        #theme-toggle,
        .top-link {
            display: none;
        }

    </style>
    <style>
        @media (prefers-color-scheme: dark) {
            :root {
                --theme: #1d1e20;
                --entry: #2e2e33;
                --primary: rgba(255, 255, 255, 0.84);
                --secondary: rgba(255, 255, 255, 0.56);
                --tertiary: rgba(255, 255, 255, 0.16);
                --content: rgba(255, 255, 255, 0.74);
                --hljs-bg: #2e2e33;
                --code-bg: #37383e;
                --border: #333;
            }

            .list {
                background: var(--theme);
            }

            .list:not(.dark)::-webkit-scrollbar-track {
                background: 0 0;
            }

            .list:not(.dark)::-webkit-scrollbar-thumb {
                border-color: var(--theme);
            }
        }

    </style>
</noscript>

<header class="header">
    <nav class="nav">
        <div class="logo">
            <a href="http://zouheng22.gitee.io/flippedzh" accesskey="h" title="flipped (Alt + H)">flipped</a>
            <span class="logo-switches">
                <button id="theme-toggle" accesskey="t" title="(Alt + T)">
                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                    </svg>
                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5"></circle>
                        <line x1="12" y1="1" x2="12" y2="3"></line>
                        <line x1="12" y1="21" x2="12" y2="23"></line>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                        <line x1="1" y1="12" x2="3" y2="12"></line>
                        <line x1="21" y1="12" x2="23" y2="12"></line>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                    </svg>
                </button>
                
            </span>
        </div>
        <ul id="menu">
            <li>
                <a href="http://zouheng22.gitee.io/flippedzh/archives/" title="文章">
                    <span>文章</span>
                </a>
            </li>
            <li>
                <a href="http://zouheng22.gitee.io/flippedzh/categories" title="目录">
                    <span>目录</span>
                </a>
            </li>
            <li>
                <a href="http://zouheng22.gitee.io/flippedzh/tags" title="标签">
                    <span>标签</span>
                </a>
            </li>
            <li>
                <a href="http://zouheng22.gitee.io/flippedzh/series" title="系列">
                    <span>系列</span>
                </a>
            </li>
            <li>
                <a href="http://zouheng22.gitee.io/flippedzh/search/" title="搜索">
                    <span>搜索</span>
                </a>
            </li>
            <li>
                <a href="http://zouheng22.gitee.io/flippedzh/fr" title="关于我">
                    <span>关于我</span>
                </a>
            </li>
        </ul>
    </nav>
</header>
<main class="main">

<article class="post-single">
  <header class="post-header">
    <div class="breadcrumbs"><a href="http://zouheng22.gitee.io/flippedzh">Home</a>&nbsp;»&nbsp;<a href="http://zouheng22.gitee.io/flippedzh/posts/">Posts</a>&nbsp;»&nbsp;<a href="http://zouheng22.gitee.io/flippedzh/posts/papermod/">PaperMod</a></div>
    <h1 class="post-title">
      Features<div class="entry-isdraft"><sup>&nbsp;&nbsp;[draft]</sup></div>
    </h1>
    <div class="post-meta">January 20, 2021&nbsp;·&nbsp;6 min&nbsp;·&nbsp;Aditya Telange
</div>
  </header> <div class="toc">
    <details >
        <summary accesskey="c" title="(Alt + C)">
            <div class="details">Table of Contents</div>
        </summary>
        <div class="inner"><ul>
                <li>
                    <a href="#intro" aria-label="Intro">Intro</a></li>
                <li>
                    <a href="#assets-jscss" aria-label="Assets (js/css)">Assets (js/css)</a></li>
                <li>
                    <a href="#default-theme-lightdarkauto" aria-label="Default Theme light/dark/auto">Default Theme light/dark/auto</a></li>
                <li>
                    <a href="#theme-switch-toggle-enabled-by-default" aria-label="Theme Switch Toggle (enabled by default)">Theme Switch Toggle (enabled by default)</a></li>
                <li>
                    <a href="#archives-layout" aria-label="Archives Layout">Archives Layout</a></li>
                <li>
                    <a href="#regular-mode-default-mode" aria-label="Regular Mode (default-mode)">Regular Mode (default-mode)</a></li>
                <li>
                    <a href="#home-info-mode" aria-label="Home-Info Mode">Home-Info Mode</a></li>
                <li>
                    <a href="#profile-mode" aria-label="Profile Mode">Profile Mode</a></li>
                <li>
                    <a href="#search-page" aria-label="Search Page">Search Page</a></li>
                <li>
                    <a href="#draft-page-indication" aria-label="Draft Page indication">Draft Page indication</a></li>
                <li>
                    <a href="#post-cover-image" aria-label="Post Cover Image">Post Cover Image</a></li>
                <li>
                    <a href="#share-buttons-on-post" aria-label="Share Buttons on post">Share Buttons on post</a></li>
                <li>
                    <a href="#show-post-reading-time" aria-label="Show post reading time">Show post reading time</a></li>
                <li>
                    <a href="#show-table-of-contents-toc-on-blog-post" aria-label="Show Table of Contents (Toc) on blog post">Show Table of Contents (Toc) on blog post</a></li>
                <li>
                    <a href="#breadcrumb-navigation" aria-label="BreadCrumb Navigation">BreadCrumb Navigation</a></li>
                <li>
                    <a href="#edit-link-for-posts" aria-label="Edit Link for Posts">Edit Link for Posts</a></li>
                <li>
                    <a href="#other-posts-suggestion-below-a-post" aria-label="Other Posts suggestion below a post">Other Posts suggestion below a post</a></li>
                <li>
                    <a href="#multiple-authors" aria-label="Multiple Authors">Multiple Authors</a></li>
                <li>
                    <a href="#comments" aria-label="Comments">Comments</a></li>
                <li>
                    <a href="#accesskeys" aria-label="AccessKeys">AccessKeys</a></li>
                <li>
                    <a href="#enhanced-seo" aria-label="Enhanced SEO">Enhanced SEO</a><ul>
                        
                <li>
                    <a href="#twitter-cards-support" aria-label="Twitter Cards Support">Twitter Cards Support</a></li>
                <li>
                    <a href="#opengraph-support" aria-label="OpenGraph support">OpenGraph support</a></li></ul>
                </li>
                <li>
                    <a href="#multilingual-support" aria-label="Multilingual Support">Multilingual Support</a></li>
                <li>
                    <a href="#misc" aria-label="Misc">Misc</a><ul>
                        
                <li>
                    <a href="#scroll-bar-themed-by-default" aria-label="Scroll-Bar themed (by default)">Scroll-Bar themed (by default)</a></li>
                <li>
                    <a href="#smooth-scroll-between-in-page-links-by-default" aria-label="Smooth Scroll between in-page links (by default)">Smooth Scroll between in-page links (by default)</a></li>
                <li>
                    <a href="#scroll-to-top-button-by-default" aria-label="Scroll-to-Top Button (by default)">Scroll-to-Top Button (by default)</a></li>
                <li>
                    <a href="#google-analytics-integration" aria-label="Google Analytics integration">Google Analytics integration</a></li>
                <li>
                    <a href="#syntax-highlighting" aria-label="Syntax highlighting">Syntax highlighting</a></li>
                <li>
                    <a href="#rss-feeds" aria-label="RSS feeds">RSS feeds</a>
                </li>
            </ul>
            </li>
            </ul>
        </div>
    </details>
</div>

  <div class="post-content"><h3 id="intro">Intro<a hidden class="anchor" aria-hidden="true" href="#intro">#</a></h3>
<ul>
<li>
<p><strong>We&rsquo;ll be using <code>yml/yaml</code> format for all examples down below, I recommend using <code>yml</code> over <code>toml</code> as it is easier to read.</strong></p>
</li>
<li>
<p>You can find any <a href="https://www.google.com/search?q=yml+to+toml">YML to TOML</a> converters if necessary.</p>
</li>
</ul>
<hr>
<h3 id="assets-jscss">Assets (js/css)<a hidden class="anchor" aria-hidden="true" href="#assets-jscss">#</a></h3>
<p>The following is enabled by default</p>
<ul>
<li><a href="https://gohugo.io/hugo-pipes/minification/">minification</a> - makes the assets size smallest as possible.</li>
<li><a href="https://gohugo.io/hugo-pipes/bundling/">bundling</a> - bundles all the styles in one single asset</li>
<li><a href="https://gohugo.io/hugo-pipes/fingerprint/">fingerprint/integrity</a> check.</li>
</ul>
<hr>
<h3 id="default-theme-lightdarkauto">Default Theme light/dark/auto<a hidden class="anchor" aria-hidden="true" href="#default-theme-lightdarkauto">#</a></h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">params</span>:
    <span style="color:#75715e"># defaultTheme: light</span>
    <span style="color:#75715e"># defaultTheme: dark</span>
    <span style="color:#f92672">defaultTheme</span>: <span style="color:#ae81ff">auto</span> <span style="color:#75715e"># to switch between dark or light according to browser theme</span>
</code></pre></div></details>
<hr>
<h3 id="theme-switch-toggle-enabled-by-default">Theme Switch Toggle (enabled by default)<a hidden class="anchor" aria-hidden="true" href="#theme-switch-toggle-enabled-by-default">#</a></h3>
<p>Shows icon besides title of page to change theme</p>
<p>To disable it :</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">disableThemeToggle</span>: <span style="color:#66d9ef">true</span>
</code></pre></div><p>You can refer following table for better understanding&hellip;</p>
<table>
<thead>
<tr>
<th><code>defaultTheme</code></th>
<th><code>disableThemeToggle</code></th>
<th>checks local storage?</th>
<th>checks system theme?</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>auto</code></td>
<td>true</td>
<td>No</td>
<td>Yes</td>
<td>only system theme</td>
</tr>
<tr>
<td></td>
<td>false</td>
<td>Yes (if not-&gt;2)</td>
<td>Yes (2)</td>
<td><em>switch present</em></td>
</tr>
<tr>
<td><code>dark</code></td>
<td>true</td>
<td>No</td>
<td>No</td>
<td>force dark only</td>
</tr>
<tr>
<td></td>
<td>false</td>
<td>Yes</td>
<td>No</td>
<td><em>switch present</em></td>
</tr>
<tr>
<td><code>light</code></td>
<td>true</td>
<td>No</td>
<td>No</td>
<td>force light only</td>
</tr>
<tr>
<td></td>
<td>false</td>
<td>Yes</td>
<td>No</td>
<td><em>switch present</em></td>
</tr>
</tbody>
</table>
<hr>
<h3 id="archives-layout">Archives Layout<a hidden class="anchor" aria-hidden="true" href="#archives-layout">#</a></h3>
<p>Create a page with <code>archive.md</code> in <code>content</code> directory with following content</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">.
├── config.yml
├── content/
│   ├── archives.md   &lt;--- Create archive.md here
│   └── posts/
├── static/
└── themes/
    └── PaperMod/
</code></pre></div><p>and add the following to it</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml">---
<span style="color:#f92672">title</span>: <span style="color:#e6db74">&#34;Archive&#34;</span>
<span style="color:#f92672">layout</span>: <span style="color:#e6db74">&#34;archives&#34;</span>
<span style="color:#f92672">url</span>: <span style="color:#e6db74">&#34;/archives/&#34;</span>
<span style="color:#f92672">summary</span>: <span style="color:#ae81ff">archives</span>
---

</code></pre></div><p><strong>Note:</strong> Archives Layout does not support Multilingual Month Translations.</p>
<p>ex: <a href="https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/archives.md">archives.md</a></p>
<hr>
<h3 id="regular-mode-default-mode">Regular Mode (default-mode)<a hidden class="anchor" aria-hidden="true" href="#regular-mode-default-mode">#</a></h3>
<p><img loading="lazy" src="images/regular.jpg" alt="regular"  />
</p>
<hr>
<h3 id="home-info-mode">Home-Info Mode<a hidden class="anchor" aria-hidden="true" href="#home-info-mode">#</a></h3>
<p><img loading="lazy" src="images/homeinfo.jpg" alt="homeinfo"  />
</p>
<p>Use 1st entry as some Information</p>
<p>add following to config file</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">params</span>:
    <span style="color:#f92672">homeInfoParams</span>:
        <span style="color:#f92672">Title</span>: <span style="color:#ae81ff">Hi there wave</span>
        <span style="color:#f92672">Content</span>: <span style="color:#ae81ff">Can be Info, links, about...</span>

    <span style="color:#f92672">socialIcons</span>: <span style="color:#75715e"># optional</span>
        - <span style="color:#f92672">name</span>: <span style="color:#e6db74">&#34;&lt;platform&gt;&#34;</span>
            <span style="color:#f92672">url</span>: <span style="color:#e6db74">&#34;&lt;link&gt;&#34;</span>
        - <span style="color:#f92672">name</span>: <span style="color:#e6db74">&#34;&lt;platform 2&gt;&#34;</span>
            <span style="color:#f92672">url</span>: <span style="color:#e6db74">&#34;&lt;link2&gt;&#34;</span>
</code></pre></div><p>ex. <a href="https://github.com/adityatelange/hugo-PaperMod/blob/exampleSite/config.yml#L106">config.yml#L106</a></p>
<hr>
<h3 id="profile-mode">Profile Mode<a hidden class="anchor" aria-hidden="true" href="#profile-mode">#</a></h3>
<p><img loading="lazy" src="https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/posts/papermod/papermod-features/images/profile.jpg" alt="profile"  />
</p>
<p>Shows Index/Home page as Full Page with Social Links and Image</p>
<p>add following to config file</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">params</span>:
    <span style="color:#f92672">profileMode</span>:
        <span style="color:#f92672">enabled</span>: <span style="color:#66d9ef">true</span>
        <span style="color:#f92672">title</span>: <span style="color:#e6db74">&#34;&lt;Title&gt;&#34;</span> <span style="color:#75715e"># optional default will be site title</span>
        <span style="color:#f92672">subtitle</span>: <span style="color:#e6db74">&#34;This is subtitle&#34;</span>
        <span style="color:#f92672">imageUrl</span>: <span style="color:#e6db74">&#34;&lt;image link&gt;&#34;</span> <span style="color:#75715e"># optional</span>
        <span style="color:#f92672">imageTitle</span>: <span style="color:#e6db74">&#34;&lt;title of image as alt&gt;&#34;</span> <span style="color:#75715e"># optional</span>
        <span style="color:#f92672">imageWidth</span>: <span style="color:#ae81ff">120</span> <span style="color:#75715e"># custom size</span>
        <span style="color:#f92672">imageHeight</span>: <span style="color:#ae81ff">120</span> <span style="color:#75715e"># custom size</span>
        <span style="color:#f92672">buttons</span>:
            - <span style="color:#f92672">name</span>: <span style="color:#ae81ff">Archive</span>
            <span style="color:#f92672">url</span>: <span style="color:#e6db74">&#34;/archive&#34;</span>
            - <span style="color:#f92672">name</span>: <span style="color:#ae81ff">Github</span>
            <span style="color:#f92672">url</span>: <span style="color:#e6db74">&#34;https://github.com/&#34;</span>

    <span style="color:#f92672">socialIcons</span>: <span style="color:#75715e"># optional</span>
        - <span style="color:#f92672">name</span>: <span style="color:#e6db74">&#34;&lt;platform&gt;&#34;</span>
            <span style="color:#f92672">url</span>: <span style="color:#e6db74">&#34;&lt;link&gt;&#34;</span>
        - <span style="color:#f92672">name</span>: <span style="color:#e6db74">&#34;&lt;platform 2&gt;&#34;</span>
            <span style="color:#f92672">url</span>: <span style="color:#e6db74">&#34;&lt;link2&gt;&#34;</span>
</code></pre></div><hr>
<h3 id="search-page">Search Page<a hidden class="anchor" aria-hidden="true" href="#search-page">#</a></h3>
<p>PaperMod uses <a href="https://fusejs.io/getting-started/different-builds.html#explanation-of-different-builds">Fuse.js Basic</a> for seach functionality</p>
<p>Add the following to site config, <code>config.yml</code></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">outputs</span>:
    <span style="color:#f92672">home</span>:
        - <span style="color:#ae81ff">HTML</span>
        - <span style="color:#ae81ff">RSS</span>
        - <span style="color:#ae81ff">JSON</span> <span style="color:#75715e"># is necessary</span>
</code></pre></div><p>Create a page with <code>search.md</code> in <code>content</code> directory with following content</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml">---
<span style="color:#f92672">title</span>: <span style="color:#e6db74">&#34;Search&#34;</span> <span style="color:#75715e"># in any language you want</span>
<span style="color:#f92672">layout</span>: <span style="color:#e6db74">&#34;search&#34;</span> <span style="color:#75715e"># is necessary</span>
<span style="color:#75715e"># url: &#34;/archive&#34;</span>
<span style="color:#75715e"># description: &#34;Description for Search&#34;</span>
<span style="color:#f92672">summary</span>: <span style="color:#e6db74">&#34;search&#34;</span>
---

</code></pre></div><p>To hide a particular page from being searched, add it in post&rsquo;s fron&rsquo;t matter</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml">---
<span style="color:#f92672">searchHidden</span>: <span style="color:#66d9ef">true</span>
</code></pre></div><p>ex: <a href="https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/search.md">search.md</a></p>
<blockquote>
<p>Search Page also has Key bindings:</p>
<ul>
<li>Arrow keys to move up/down the list</li>
<li>Enter key (return) or Right Arrow key to Go to highlighted page</li>
<li>Escape key to clear searchbox and results</li>
</ul>
</blockquote>
<p>For Multilingual use <code>search.&lt;lang&gt;.md</code> ex. <code>search.es.md</code>.</p>
<p><strong>Note:</strong> Search will work only on current language, user is currently on !</p>
<p><strong>Customizing Fusejs Options</strong></p>
<p>Refer <a href="https://fusejs.io/api/options.html">https://fusejs.io/api/options.html</a> for Options, Add those as shown below.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">params</span>:
    <span style="color:#f92672">fuseOpts</span>:
        <span style="color:#f92672">isCaseSensitive</span>: <span style="color:#66d9ef">false</span>
        <span style="color:#f92672">shouldSort</span>: <span style="color:#66d9ef">true</span>
        <span style="color:#f92672">location</span>: <span style="color:#ae81ff">0</span>
        <span style="color:#f92672">distance</span>: <span style="color:#ae81ff">1000</span>
        <span style="color:#f92672">threshold</span>: <span style="color:#ae81ff">0.4</span>
        <span style="color:#f92672">minMatchCharLength</span>: <span style="color:#ae81ff">0</span>
        <span style="color:#f92672">keys</span>: [<span style="color:#e6db74">&#34;title&#34;</span>, <span style="color:#e6db74">&#34;permalink&#34;</span>, <span style="color:#e6db74">&#34;summary&#34;</span>, <span style="color:#e6db74">&#34;content&#34;</span>]
</code></pre></div><hr>
<h3 id="draft-page-indication">Draft Page indication<a hidden class="anchor" aria-hidden="true" href="#draft-page-indication">#</a></h3>
<p>adds <code>[draft]</code> mark to indicate draft pages.</p>
<hr>
<h3 id="post-cover-image">Post Cover Image<a hidden class="anchor" aria-hidden="true" href="#post-cover-image">#</a></h3>
<p>In post&rsquo;s page-variables add :</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">cover</span>:
    <span style="color:#f92672">image</span>: <span style="color:#e6db74">&#34;&lt;image path/url&gt;&#34;</span>
    <span style="color:#75715e"># can also paste direct link from external site</span>
    <span style="color:#75715e"># ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png</span>
    <span style="color:#f92672">alt</span>: <span style="color:#e6db74">&#34;&lt;alt text&gt;&#34;</span>
    <span style="color:#f92672">caption</span>: <span style="color:#e6db74">&#34;&lt;text&gt;&#34;</span>
    <span style="color:#f92672">relative</span>: <span style="color:#66d9ef">false</span> <span style="color:#75715e"># To use relative path for cover image, used in hugo Page-bundles</span>
</code></pre></div><p>When you include images in the <a href="https://gohugo.io/content-management/page-bundles/">Page Bundle</a>, multiple sizes of the image will automatically be provided using the HTML5 <code>srcset</code> field.</p>
<p>To reduce generation time and size of the site, you can disable this feature using</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">params</span>:
    <span style="color:#f92672">cover</span>:
        <span style="color:#f92672">responsiveImages</span>: <span style="color:#66d9ef">false</span>
</code></pre></div><p>To enable hyperlinks to the full image size on post pages, use</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">params</span>:
    <span style="color:#f92672">cover</span>:
        <span style="color:#f92672">linkFullImages</span>: <span style="color:#66d9ef">true</span>
</code></pre></div><hr>
<h3 id="share-buttons-on-post">Share Buttons on post<a hidden class="anchor" aria-hidden="true" href="#share-buttons-on-post">#</a></h3>
<p>Displays Share Buttons at Bottom of each post</p>
<p>to show share buttons add</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">params</span>:
    <span style="color:#f92672">ShowShareButtons</span>: <span style="color:#66d9ef">true</span>
</code></pre></div><hr>
<h3 id="show-post-reading-time">Show post reading time<a hidden class="anchor" aria-hidden="true" href="#show-post-reading-time">#</a></h3>
<p>Displays Reading Time (the estimated time, in minutes, it takes to read the content.)</p>
<p>To show reading time add</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">Params</span>:
    <span style="color:#f92672">ShowReadingTime</span>: <span style="color:#66d9ef">true</span>
</code></pre></div><hr>
<h3 id="show-table-of-contents-toc-on-blog-post">Show Table of Contents (Toc) on blog post<a hidden class="anchor" aria-hidden="true" href="#show-table-of-contents-toc-on-blog-post">#</a></h3>
<p>Displays ToC on blog-pages</p>
<p>To show ToC add following to page-variables</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">ShowToc</span>: <span style="color:#66d9ef">true</span>
</code></pre></div><p>To keep Toc Open <strong>by default</strong> on a post add following to page-variables:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">TocOpen</span>: <span style="color:#66d9ef">true</span>
</code></pre></div><hr>
<h3 id="breadcrumb-navigation">BreadCrumb Navigation<a hidden class="anchor" aria-hidden="true" href="#breadcrumb-navigation">#</a></h3>
<p>Adds BreadCrumb Navigation above Post&rsquo;s Title to show subsections and Navigation to Home</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">params</span>:
    <span style="color:#f92672">ShowBreadCrumbs</span>: <span style="color:#66d9ef">true</span>
</code></pre></div><p>Can be diabled for particular page&rsquo;s front-matter</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml">---
<span style="color:#f92672">ShowBreadCrumbs</span>: <span style="color:#66d9ef">false</span>
---

</code></pre></div><hr>
<h3 id="edit-link-for-posts">Edit Link for Posts<a hidden class="anchor" aria-hidden="true" href="#edit-link-for-posts">#</a></h3>
<p>Add a button to suggest changes by using the file path of the post to link to a edit destination.</p>
<p>For site config use:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">Params</span>:
    <span style="color:#f92672">editPost</span>:
        <span style="color:#f92672">URL</span>: <span style="color:#e6db74">&#34;https://github.com/&lt;path_to_repo&gt;/content&#34;</span>
        <span style="color:#f92672">Text</span>: <span style="color:#e6db74">&#34;Suggest Changes&#34;</span> <span style="color:#75715e"># edit text</span>
        <span style="color:#f92672">appendFilePath</span>: <span style="color:#66d9ef">true</span> <span style="color:#75715e"># to append file path to Edit link</span>
</code></pre></div><p>Can be modified for individual pages</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml">---
<span style="color:#f92672">editPost</span>:
    <span style="color:#f92672">URL</span>: <span style="color:#e6db74">&#34;https://github.com/&lt;path_to_repo&gt;/content&#34;</span>
    <span style="color:#f92672">Text</span>: <span style="color:#e6db74">&#34;Suggest Changes&#34;</span> <span style="color:#75715e"># edit text</span>
    <span style="color:#f92672">appendFilePath</span>: <span style="color:#66d9ef">true</span> <span style="color:#75715e"># to append file path to Edit link</span>
---

</code></pre></div><p>The example above would yield the following link for the post file <code>posts/post-name.md</code>:
<a href="https://github.com/">https://github.com/</a>&lt;path_to_repo&gt;/content/posts/post-name.md</p>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Required</th>
<th>Default Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>editPost.URL</td>
<td>true</td>
<td>-</td>
</tr>
<tr>
<td>editPost.appendFilePath</td>
<td>false</td>
<td>false</td>
</tr>
<tr>
<td>editPost.Text</td>
<td>false</td>
<td>&ldquo;Edit&rdquo;</td>
</tr>
</tbody>
</table>
<p>Since the link generated is a regular HTML anchor tag <code>&lt;a href=...&gt;</code>, you can
also use other URL schemas like <code>mailto://</code>, e.g.
<code>URL: &quot;mailto://mail@example.com?subject=Suggesting changes for &quot;</code></p>
<hr>
<h3 id="other-posts-suggestion-below-a-post">Other Posts suggestion below a post<a hidden class="anchor" aria-hidden="true" href="#other-posts-suggestion-below-a-post">#</a></h3>
<p>Adds a Previous / Next post suggestion under a single post</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">params</span>:
    <span style="color:#f92672">ShowPostNavLinks</span>: <span style="color:#66d9ef">true</span>
</code></pre></div><hr>
<h3 id="multiple-authors">Multiple Authors<a hidden class="anchor" aria-hidden="true" href="#multiple-authors">#</a></h3>
<p>To Use multiple authors for a post, in post-variables:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml">---
<span style="color:#f92672">author</span>: [<span style="color:#e6db74">&#34;Me&#34;</span>, <span style="color:#e6db74">&#34;You&#34;</span>]
---

</code></pre></div><p>To use Multiple Authors Site-wide, in <code>config.yml</code>:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">params</span>:
    <span style="color:#f92672">author</span>: [<span style="color:#e6db74">&#34;Me&#34;</span>, <span style="color:#e6db74">&#34;You&#34;</span>]
</code></pre></div><hr>
<h3 id="comments">Comments<a hidden class="anchor" aria-hidden="true" href="#comments">#</a></h3>
<p>to add comments, create a html file</p>
<p><code>layouts/partials/comments.html</code></p>
<p>and paste code provided by your comments provider</p>
<p>also in config add this</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">params</span>:
    <span style="color:#f92672">comments</span>: <span style="color:#66d9ef">true</span>
</code></pre></div><p>read more about this <a href="https://gohugo.io/content-management/comments/">hugo-comments</a></p>
<hr>
<h3 id="accesskeys">AccessKeys<a hidden class="anchor" aria-hidden="true" href="#accesskeys">#</a></h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text">c - ToC Open/Close
g - Go To Top
h - Home (according to current lang)
t - Theme toggle
/ - Jumps to search page if in menu
</code></pre></div><p><a href="https://www.w3schools.com/tags/att_global_accesskey.asp">What&rsquo;s AccessKeys ?</a></p>
<hr>
<h3 id="enhanced-seo">Enhanced SEO<a hidden class="anchor" aria-hidden="true" href="#enhanced-seo">#</a></h3>
<p><strong>Enabled only when <code>env: production</code></strong></p>
<ul>
<li><a href="https://support.google.com/webmasters/answer/7506797?hl=en">Rich Results/Snippets Support</a></li>
</ul>
<h4 id="twitter-cards-support">Twitter Cards Support<a hidden class="anchor" aria-hidden="true" href="#twitter-cards-support">#</a></h4>
<ul>
<li>The Twitter Cards metadata, except <code>twitter:image</code> should not require
additional configuration, since it is generated from metadata that
you should already have (for instance the page title and description).</li>
<li>The <code>twitter:image</code> uses the <a href="#post-cover-image">Post Cover Image</a>, if present.</li>
<li>In the absence of a cover images, the first image from the <code>images</code>
frontmatter (a list) is used.
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yaml" data-lang="yaml"><span style="color:#f92672">images</span>:
  - <span style="color:#ae81ff">image_01.png</span>
  - <span style="color:#ae81ff">image_02.png</span>
</code></pre></div></li>
<li>Finally, if neither of those are provided, <code>twitter:image</code> comes from the first
<a href="https://gohugo.io/content-management/page-bundles/">Page Bundle</a>
image with <code>feature</code> in the name, with a fallback to the first image with
<code>cover</code> or <code>thumbnail</code> in the name.</li>
</ul>
<h4 id="opengraph-support">OpenGraph support<a hidden class="anchor" aria-hidden="true" href="#opengraph-support">#</a></h4>
<ul>
<li>The OpenGraph metadata, except <code>og:image</code> should not require
additional configuration, since it is generated from metadata that
you should already have (for instance the page title and description).</li>
<li>The <code>og:image</code> uses the <a href="#post-cover-image">Post Cover Image</a>, if present.</li>
<li>In the absence of a cover images, the first image from the <code>images</code>
frontmatter (a list) is used.
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yaml" data-lang="yaml"><span style="color:#f92672">images</span>:
  - <span style="color:#ae81ff">image_01.png</span>
  - <span style="color:#ae81ff">image_02.png</span>
</code></pre></div></li>
<li>Finally, if neither of those are provided, <code>og:image</code> comes from the first
<a href="https://gohugo.io/content-management/page-bundles/">Page Bundle</a>
image with <code>feature</code> in the name, with a fallback to the first image with
<code>cover</code> or <code>thumbnail</code> in the name.</li>
<li>For pages, you can also add audio (using frontmatter <code>audio: filename.ext</code>) and/or
videos.
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yaml" data-lang="yaml"><span style="color:#f92672">videos</span>:
  - <span style="color:#ae81ff">filename01.mov</span>
  - <span style="color:#ae81ff">filename02.avi</span>
</code></pre></div></li>
</ul>
<hr>
<h3 id="multilingual-support">Multilingual Support<a hidden class="anchor" aria-hidden="true" href="#multilingual-support">#</a></h3>
<hr>
<h3 id="misc">Misc<a hidden class="anchor" aria-hidden="true" href="#misc">#</a></h3>
<h4 id="scroll-bar-themed-by-default">Scroll-Bar themed (by default)<a hidden class="anchor" aria-hidden="true" href="#scroll-bar-themed-by-default">#</a></h4>
<h4 id="smooth-scroll-between-in-page-links-by-default">Smooth Scroll between in-page links (by default)<a hidden class="anchor" aria-hidden="true" href="#smooth-scroll-between-in-page-links-by-default">#</a></h4>
<h4 id="scroll-to-top-button-by-default">Scroll-to-Top Button (by default)<a hidden class="anchor" aria-hidden="true" href="#scroll-to-top-button-by-default">#</a></h4>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text">Displays a Scroll-to-Top button in right-bottom corner
</code></pre></div><h4 id="google-analytics-integration">Google Analytics integration<a hidden class="anchor" aria-hidden="true" href="#google-analytics-integration">#</a></h4>
<h4 id="syntax-highlighting">Syntax highlighting<a hidden class="anchor" aria-hidden="true" href="#syntax-highlighting">#</a></h4>
<h4 id="rss-feeds">RSS feeds<a hidden class="anchor" aria-hidden="true" href="#rss-feeds">#</a></h4>

</div>
  <footer class="post-footer">
    <ul class="post-tags">
      <li><a href="http://zouheng22.gitee.io/flippedzh/tags/papermod/">PaperMod</a></li>
    </ul>
<nav class="paginav">
  <a class="prev" href="http://zouheng22.gitee.io/flippedzh/posts/papermod/papermod-installation/">
    <span class="title">« Prev Page</span>
    <br>
    <span>Installation | Update</span>
  </a>
  <a class="next" href="http://zouheng22.gitee.io/flippedzh/posts/papermod/papermod-faq/">
    <span class="title">Next Page »</span>
    <br>
    <span>FAQs</span>
  </a>
</nav>

<div class="share-buttons">
    <a target="_blank" rel="noopener noreferrer" aria-label="share Features on twitter"
        href="https://weibo.com/">
        <svg height="256px" style="enable-background:new 0 0 256 256;" version="1.1" viewBox="0 0 256 256" width="256px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Background_1_" style="enable-background:new    ;">
        <g id="Background">
            <g>
                <path d="M249.422,30.68c-2.721-4.986-5.816-9.537-9.793-13.521     c-3.992-3.998-8.709-7.587-13.703-10.314c-8.381-4.576-18.788-6.855-29.002-6.855H59.075c-10.444,0-20.542,2.344-29.265,6.948     c-5.022,2.649-9.588,6.146-13.502,10.126c-3.932,3.998-7.491,8.488-10.046,13.572c-4.289,8.533-6.274,18.478-6.274,28.65v137.43     c0,10.326,1.671,20.678,6.296,29.134c2.681,4.9,6.191,9.86,10.087,13.795c3.934,3.97,8.583,7.225,13.503,9.955     c8.465,4.7,18.842,6.413,29.201,6.413h137.849c10.568,0,20.399-1.523,28.982-6.401c4.739-2.692,9.879-6.113,13.687-9.966     c3.923-3.968,7.2-8.851,9.886-13.799c4.566-8.415,6.533-18.874,6.533-29.131V59.285C256.012,48.978,254.031,39.124,249.422,30.68     z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFE591;"/>
            </g>
        </g>
    </g>
        <g id="Shape_4_1_" style="enable-background:new    ;">
            <g id="Shape_4">
                <g>
                <path d="M169.217,151.074c-2.088-20.866-29.861-35.239-62.04-32.095     c-32.171,3.145-56.568,22.611-54.478,43.479c2.09,20.876,29.865,35.248,62.039,32.11     C146.916,191.425,171.303,171.957,169.217,151.074z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;"/>
            </g></g>
        </g><g id="Shape_3_1_" style="enable-background:new    ;">
            <g id="Shape_3"><g><path d="M179.092,125.276c-2.738-0.812-4.615-1.361-3.18-4.917     c3.104-7.715,3.425-14.372,0.059-19.121c-6.311-8.908-23.572-8.427-43.359-0.239c0-0.011-6.212,2.687-4.625-2.184     c3.044-9.67,2.585-17.771-2.151-22.444c-10.736-10.616-39.284,0.399-63.764,24.585c-18.333,18.12-28.979,37.325-28.979,53.928     c0,31.76,41.215,51.07,81.536,51.07c52.858,0,88.019-30.345,88.019-54.443C202.648,136.952,190.239,128.692,179.092,125.276z      M114.738,194.569c-32.174,3.138-59.949-11.234-62.039-32.11c-2.09-20.868,22.307-40.335,54.478-43.479     c32.179-3.145,59.952,11.229,62.04,32.095C171.303,171.957,146.916,191.425,114.738,194.569z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#CD201F;"/></g></g></g><g id="Shape_2_1_" style="enable-background:new    ;"><g id="Shape_2"><g><path d="M117.572,134.441c-15.319-3.905-32.636,3.573-39.29,16.802     c-6.777,13.483-0.225,28.456,15.254,33.354c16.032,5.063,34.93-2.701,41.5-17.255     C141.516,153.107,133.426,138.454,117.572,134.441z M105.874,168.889c-3.115,4.863-9.783,6.996-14.806,4.749     c-4.949-2.204-6.411-7.861-3.296-12.604c3.076-4.729,9.52-6.834,14.505-4.785C107.321,158.354,108.931,163.969,105.874,168.889z      M116.131,155.985c-1.125,1.887-3.615,2.794-5.565,2.007c-1.917-0.772-2.518-2.878-1.429-4.735     c1.122-1.844,3.513-2.744,5.427-1.999C116.508,151.952,117.206,154.086,116.131,155.985z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#232323;"/></g></g></g><g id="Shape_1_1_" style="enable-background:new    ;"><g id="Shape_1"><g><path d="M212.111,67.308c-12.48-14.403-30.891-19.894-47.882-16.133     h-0.007c-3.932,0.876-6.438,4.901-5.598,8.986c0.839,4.089,4.706,6.701,8.639,5.829c12.088-2.672,25.168,1.236,34.043,11.467     c8.863,10.23,11.271,24.185,7.475,36.416l0.002,0.004c-1.236,3.986,0.856,8.247,4.689,9.535c3.817,1.288,7.922-0.891,9.16-4.864     c0-0.008,0-0.022,0.003-0.03C227.965,101.311,224.595,81.696,212.111,67.308z M169.621,77.464     c-3.383,0.751-5.54,4.218-4.815,7.743c0.726,3.51,4.052,5.767,7.429,5.001v0.007c4.048-0.89,8.436,0.409,11.404,3.831     c2.975,3.43,3.773,8.104,2.497,12.203h0.007c-1.061,3.422,0.738,7.103,4.03,8.214c3.292,1.097,6.823-0.773,7.884-4.203     c2.603-8.383,0.977-17.936-5.111-24.95C186.871,78.296,177.901,75.632,169.621,77.464z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#DD880C;"/></g></g></g></svg>
    </a>
    <a target="_blank" rel="noopener noreferrer" aria-label="share Features on linkedin"
        href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3a%2f%2fzouheng22.gitee.io%2fflippedzh%2fposts%2fpapermod%2fpapermod-features%2f&amp;title=Features&amp;summary=Features&amp;source=http%3a%2f%2fzouheng22.gitee.io%2fflippedzh%2fposts%2fpapermod%2fpapermod-features%2f">
    
        <svg id="douyin" t="1570181112474" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="2916" width="128" height="128">
          <path
            d="M937.386667 423.850667a387.84 387.84 0 0 1-232.874667-77.824v352.341333C704.512 878.250667 565.930667 1024 394.922667 1024S85.333333 878.250667 85.333333 698.368c0-179.882667 138.581333-325.632 309.589334-325.632 17.066667 0 33.706667 1.450667 49.92 4.266667v186.624a131.754667 131.754667 0 0 0-48.64-9.216c-76.288 0-138.154667 65.024-138.154667 145.322666 0 80.213333 61.866667 145.322667 138.24 145.322667 76.202667 0 138.069333-65.109333 138.069333-145.322667V0h172.714667c0 134.485333 103.68 243.541333 231.594667 243.541333v180.309334h-1.28"
            p-id="2917"></path>
        </svg>

    </a>
    <a target="_blank" rel="noopener noreferrer" aria-label="share Features on reddit"
        href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3a%2f%2fzouheng22.gitee.io%2fflippedzh%2fposts%2fpapermod%2fpapermod-features%2f&amp;title=Features&amp;summary=Features&amp;source=http%3a%2f%2fzouheng22.gitee.io%2fflippedzh%2fposts%2fpapermod%2fpapermod-features%2f">
        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m437 0h-362c-41.398438 0-75 34.601562-75 76v361c0 41.398438 33.601562 75 75 75h362c41.398438 0 75-33.601562 75-75v-361c0-41.398438-33.601562-76-75-76zm0 0" fill="#25d9f8"/><path d="m512 76v361c0 41.398438-33.601562 75-75 75h-181v-512h181c41.398438 0 75 34.601562 75 76zm0 0" fill="#00c0f1"/><g fill="#ececf1"><path d="m121 196h60v211h-60zm0 0"/><path d="m121 106h60v60h-60zm0 0"/><path d="m391 275.800781v131.199219h-60v-121c0-16.5-13.5-30-30-30s-30 13.5-30 30v121h-60v-211h60v11.398438c15.601562-5.097657 25.800781-11.398438 45-11.398438 40.800781 0 75 36.597656 75 79.800781zm0 0"/></g><path d="m391 275.800781v131.199219h-60v-121c0-16.5-13.5-30-30-30s-30 13.5-30 30v121h-15v-211h15v11.398438c15.601562-5.097657 25.800781-11.398438 45-11.398438 40.800781 0 75 36.597656 75 79.800781zm0 0" fill="#e2e2e7"/></svg>
    </a>
    <a target="_blank" rel="noopener noreferrer" aria-label="share Features on facebook"
        href="https://facebook.com/sharer/sharer.php?u=http%3a%2f%2fzouheng22.gitee.io%2fflippedzh%2fposts%2fpapermod%2fpapermod-features%2f">
        <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve">
            <path
                d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-106.468,0l0,-192.915l66.6,0l12.672,-82.621l-79.272,0l0,-53.617c0,-22.603 11.073,-44.636 46.58,-44.636l36.042,0l0,-70.34c0,0 -32.71,-5.582 -63.982,-5.582c-65.288,0 -107.96,39.569 -107.96,111.204l0,62.971l-72.573,0l0,82.621l72.573,0l0,192.915l-191.104,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Z" />
        </svg>
    </a>
    <a target="_blank" rel="noopener noreferrer" aria-label="share Features on whatsapp"
        href="https://weixin.qq.com/">
        <svg height="512pt" viewBox="0 -45 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m138.667969 96h-21.335938v21.332031h21.335938zm0 0"/><path d="m245.332031 96h-21.332031v21.332031h21.332031zm0 0"/><path d="m320 224h-21.332031v21.332031h21.332031zm0 0"/><path d="m426.667969 224h-21.335938v21.332031h21.335938zm0 0"/><path d="m469.332031 422.535156-65.730469-32.800781c-13.398437 3.269531-27.140624 4.925781-40.933593 4.933594-82.402344 0-149.335938-57.46875-149.335938-128 0-70.535157 66.933594-128 149.335938-128 82.398437 0 149.332031 57.464843 149.332031 128 0 33.867187-15.066406 65.464843-42.667969 89.464843zm-63.332031-55.46875 42 21.066406v-42l4-3.199218c24.933594-20.265625 38.667969-47.332032 38.667969-76.265625 0-58.800781-57.46875-106.667969-128-106.667969-70.535157 0-128 47.867188-128 106.667969 0 58.796875 57.464843 106.664062 128 106.664062 13.324219.019531 26.597656-1.730469 39.464843-5.199219zm0 0"/><path d="m64 326.535156v-63.335937c-40.800781-28.53125-64-69.734375-64-113.867188 0-82.398437 81.332031-149.332031 181.332031-149.332031s181.335938 66.933594 181.335938 149.332031l-21.335938.402344v-.402344c0-70.53125-71.730469-128-160-128-88.265625 0-160 57.46875-160 128 0 38.535157 21.601563 74.667969 59.203125 99.203125l4.796875 3.199219v40.398437l43.601563-21.734374 3.867187.933593c29.613281 7.433594 60.539063 7.980469 90.398438 1.601563l4.535156 20.800781c-31.761719 6.785156-64.625 6.511719-96.269531-.800781zm0 0"/></svg>
    </a>
    <a target="_blank" rel="noopener noreferrer" aria-label="share Features on telegram"
        href="https://telegram.me/share/url?text=Features&amp;url=http%3a%2f%2fzouheng22.gitee.io%2fflippedzh%2fposts%2fpapermod%2fpapermod-features%2f">
        <svg version="1.1" xml:space="preserve" viewBox="2 2 28 28">
            <path
                d="M26.49,29.86H5.5a3.37,3.37,0,0,1-2.47-1,3.35,3.35,0,0,1-1-2.47V5.48A3.36,3.36,0,0,1,3,3,3.37,3.37,0,0,1,5.5,2h21A3.38,3.38,0,0,1,29,3a3.36,3.36,0,0,1,1,2.46V26.37a3.35,3.35,0,0,1-1,2.47A3.38,3.38,0,0,1,26.49,29.86Zm-5.38-6.71a.79.79,0,0,0,.85-.66L24.73,9.24a.55.55,0,0,0-.18-.46.62.62,0,0,0-.41-.17q-.08,0-16.53,6.11a.59.59,0,0,0-.41.59.57.57,0,0,0,.43.52l4,1.24,1.61,4.83a.62.62,0,0,0,.63.43.56.56,0,0,0,.4-.17L16.54,20l4.09,3A.9.9,0,0,0,21.11,23.15ZM13.8,20.71l-1.21-4q8.72-5.55,8.78-5.55c.15,0,.23,0,.23.16a.18.18,0,0,1,0,.06s-2.51,2.3-7.52,6.8Z" />
        </svg>
    </a>
</div>

  </footer>
</article>
    </main>
    <footer class="footer">
    <span>&copy; 2021 <a href="http://zouheng22.gitee.io/flippedzh">flipped</a></span>
    <span>
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://git.io/hugopapermod" rel="noopener" target="_blank">PaperMod</a>
    </span>
</footer>
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)">
    <button class="top-link" id="top-link" type="button" accesskey="g">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
            <path d="M12 6H0l6-6z" />
        </svg>
    </button>
</a>

<script>
    let menu = document.getElementById('menu')
    menu.scrollLeft = localStorage.getItem("menu-scroll-position");
    menu.onscroll = function () {
        localStorage.setItem("menu-scroll-position", menu.scrollLeft);
    }

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();
            var id = this.getAttribute("href").substr(1);
            if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
                    behavior: "smooth"
                });
            } else {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
            }
            if (id === "top") {
                history.replaceState(null, null, " ");
            } else {
                history.pushState(null, null, `#${id}`);
            }
        });
    });

</script>
<script>
    var mybutton = document.getElementById("top-link");
    window.onscroll = function () {
        if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
            mybutton.style.visibility = "visible";
            mybutton.style.opacity = "1";
        } else {
            mybutton.style.visibility = "hidden";
            mybutton.style.opacity = "0";
        }
    };

</script>
<script>
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            document.body.classList.remove('dark');
            localStorage.setItem("pref-theme", 'light');
        } else {
            document.body.classList.add('dark');
            localStorage.setItem("pref-theme", 'dark');
        }
    })

</script>
<script>
    document.querySelectorAll('pre > code').forEach((codeblock) => {
        const container = codeblock.parentNode.parentNode;

        const copybutton = document.createElement('button');
        copybutton.classList.add('copy-code');
        copybutton.innerText = 'copy';

        function copyingDone() {
            copybutton.innerText = 'copied!';
            setTimeout(() => {
                copybutton.innerText = 'copy';
            }, 2000);
        }

        copybutton.addEventListener('click', (cb) => {
            if ('clipboard' in navigator) {
                navigator.clipboard.writeText(codeblock.textContent);
                copyingDone();
                return;
            }

            const range = document.createRange();
            range.selectNodeContents(codeblock);
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            try {
                document.execCommand('copy');
                copyingDone();
            } catch (e) { };
            selection.removeRange(range);
        });

        if (container.classList.contains("highlight")) {
            container.appendChild(copybutton);
        } else if (container.parentNode.firstChild == container) {
            
        } else if (codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
            
            codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(copybutton);
        } else {
            
            codeblock.parentNode.appendChild(copybutton);
        }
    });
</script>
</body>

</html>
